<template>
	<div id="slider" class="mui-slider">
		<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<div class="mui-scroll">
				<div>
					<router-link :class="['mui-control-item-ag', item.id == 0 ? 'active' : '']" v-for="item in msg" :key="item.id" :to="item.path">{{ item.title }}</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.js';
	var msg = [
		{ id: 0, title: '推荐',path:'/home/tuijian' },
		{ id: 1, title: '女装',path:'/home/nvzhuang' },
		{ id: 2, title: '鞋包',path:'/home/xiebao' },
		{ id: 3, title: '百货',path:'/home/baihuo' },
		{ id: 4, title: '食品',path:'/home/shiping' },
		{ id: 5, title: '母婴',path:'/home/muying' },
		{ id: 6, title: '男装',path:'/home/nanzhuang' }
	];
	export default {
		data() {
			return {
				msg
			}
		},
		created() {
			},
		mounted() {
			//js行为需要初始化控件
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		},
		methods:{
		}
	}
</script>

<style lang="scss" scoped>
	* {
		touch-action: pan-y;
		// touch-action: none;
	}
	.mui-control-item-ag {
		padding: 0.9375rem;
	}
	.active{
		color: red;
	}
</style>
